<template>
	<view class="">
		<u-sticky>
			<view class="pd10 flex spaceb bg-w">
				<view class="icon" @click="show=true">
					<u-icon name="search" size="20" color="#6A6A6A"></u-icon>
				</view>
				<view class="flex">
					<!-- <view class="add mr10" @click="$u.route('/pages/procure/order/add')">新增</view> -->
					<view class="icon mr10" v-if="!showCheckbox" @click="showCheckbox=true">
						<u-icon name="list-dot" size="20" color="#6A6A6A"></u-icon>
					</view>
					<view class="icon " @click="resetClick">
						<u-icon name="reload" size="20" color="#6A6A6A"></u-icon>
					</view>
				</view>
			</view>
		</u-sticky>
		<view class="pd15">
			<u-checkbox-group v-model="checkboxValue1" placement="column" @change="checkboxChange">
				<view class="bg-w br30 pd15 mb10 pore" style="align-items: baseline;"
					v-for="(item, index) in result.orderList" :key="index">
					<view class="flex" style="align-items: baseline;">
						<u-checkbox :name="item.id" v-if="showCheckbox">
						</u-checkbox>
						<view class="fl1">
							<view class="flex spaceb">
								<view>{{item.commercialOwner_dictText}}</view>
								<view class="flex" @click.stop="selectClick(item)">
									<!-- <view class="mr5 cl-status">{{item.reviewStatus_dictText}}</view> -->
									<u-icon name="list" size="20" color="#6A6A6A"></u-icon>
								</view>
							</view>
							<view>单据时间：{{item.documentDate||''}}</view>
							<view>单据编号：{{item.documentNumber||''}}</view>
							<view>制单用户：{{item.creator_dictText||''}}</view>
							<view>入库状态：{{item.entryStatus_dictText||''}}</view>
							<view>备注信息：{{item.remarks||''}}</view>
						</view>
					</view>
					<!-- <view v-if="item.reviewStatus=='1'">
						<image src="@/static/images/examine.png" mode=""
							style="width: 150rpx;position: absolute;bottom: 30rpx;right: 30rpx;height: 77rpx;"></image>
					</view> -->
				</view>
			</u-checkbox-group>
			<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png" v-if="result.orderList==''"
				marginTop="200rpx">
			</u-empty>
		</view>
		<view style="height: 130rpx;"></view>
		<view v-if="result.orderList!=''">
			<view class="footer-btn flex alcenter spaceb">
				<view class="iconbg" @click="lastClick()">
					<u-icon name="arrow-leftward" color="#C3C3C3" size="20"></u-icon>
				</view>
				<view>{{result.current+'/'+result.pages}}({{result.total}})</view>
				<view class="iconbg" @click="nextClick()">
					<u-icon name="arrow-rightward" color="#C3C3C3" size="20"></u-icon>
				</view>
			</view>
		</view>
		<!-- <view class="footer">
			<span class="mr20">总单据金额:182782.92</span>
			<span>总实际金额:182782.92</span>
		</view> -->
		<view class="footer-btn flex center" v-show="showCheckbox">
			<!-- <view class="w16 text-center border-right">
				<u-icon name="trash" color="#6A6A6A" size="28" label="删除" labelPos="bottom"></u-icon>
			</view>
			<view class="w16 text-center border-right">
				<u-icon name="order" color="#6A6A6A" size="28" label="打印" labelPos="bottom"></u-icon>
			</view>
			<view class="w16 text-center border-right">
				<u-icon name="list-dot" color="#6A6A6A" size="28" label="批量" labelPos="bottom"></u-icon>
			</view>
			<view class="w16 text-center border-right">
				<u-icon name="calendar" color="#6A6A6A" size="28" label="生成" labelPos="bottom"></u-icon>
			</view> -->
			<view class="w16 text-center border-right">
				<u-icon name="arrow-upward" color="#6A6A6A" size="28" label="导出" labelPos="bottom"></u-icon>
			</view>
			<view class="w16 text-center" @click="showCheckbox=false">
				<u-icon name="close" color="#6A6A6A" size="28" label="取消" labelPos="bottom"></u-icon>
			</view>
		</view>
		<u-popup :show="show" @close="close" @open="open" mode="left" :closeable="true">
			<view class="popBox pd15">
				<view>查询</view>
				<view class="mt10">
					<u--input placeholder="单据编号" border="surround" clearable v-model="search.documentNumber"></u--input>
				</view>
				<view class="mt10" @click="showSupplier=true">
					<u--input placeholder="入库状态" suffixIcon="arrow-down" v-model="search.entryText"
						suffixIconStyle="color: #909399"></u--input>
				</view>
				<view class="btns">
					<view class="chongzhi" @click="resetClick">重置</view>
					<view class="confirm" @click="queryClick">查询</view>
				</view>
			</view>
		</u-popup>
		<u-picker :show="showSupplier" :columns="supplier" @confirm="confirmSupplier" @cancel="closes"
			:closeOnClickOverlay="true"></u-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				showCheckbox: false,
				checkboxValue1: [],
				list: [{
					id: 1,
					name: '测试供应商01',
					time: '2024-07-1501',
					number: 'XHDD00000105',
					d_money: 0,
					s_money: 0,
					zuzhi: '测试组',
					username: '测试人员1',
					ku_status: '已入库',
					remake: '',
					sh_status: 1,
					selected: false
				}, {
					id: 2,
					name: '测试供应商02',
					time: '2024-07-1501',
					number: 'XHDD00000105',
					d_money: 0,
					s_money: 0,
					zuzhi: '测试组',
					username: '测试人员1',
					ku_status: '已入库',
					remake: '',
					sh_status: 1
				}, {
					id: 3,
					name: '测试供应商03',
					time: '2024-07-1501',
					number: 'XHDD00000105',
					d_money: 0,
					s_money: 0,
					zuzhi: '测试组',
					username: '测试人员1',
					ku_status: '已入库',
					remake: '',
					sh_status: 1
				}],
				showSupplier: false,
				supplier: [
					['未入库', '已入库', '部分入库']
				],
				search: {
					documentNumber: '',
					entryText: '',
					entryStatus: ''
				},
				result: {
					current: 0,
					pages: 0,
					total: 0,
					orderList: [],
				},
				pageNo: 1,
				pageSize: 10,
				ids: [],
			}
		},

		/**
		 * 生命周期函数--监听页面加载
		 */
		onLoad(options) {
			// console.log(tabbars)
		},
		onShow() {
			this.procureOrderList()
			// this.isLogin = checkLogin()
			// if (!this.isLogin) {
			// 	this.isloginBind()
			// 	return false
			// }

		},
		methods: {
			procureOrderList() {
				this.$apis.procureOrderList({
					column: 'createTime',
					order: 'desc',
					pageNo: this.pageNo,
					pageSize: this.pageSize,
					_t: 1721211555986,
					documentNumber: this.search.documentNumber,
					reviewStatus: 1,
					entryStatus: this.search.entryStatus
				}).then(res => {
					let ress = res.result
					this.result = {
						current: ress.current,
						pages: ress.pages,
						total: ress.total,
						orderList: ress.records
					}
				})
			},
			procureOrderDels() {
				let that = this
				uni.showModal({
					title: '确定删除吗？',
					success(res) {
						if (res.confirm) {
							that.$apis.procureOrderDels(that.ids).then(res => {
								if (res.code == 200) {
									that.$u.toast(res.result)
									that.showCheckbox = false
									that.updateOrderList()
								}
							})
						}
					}
				})
			},
			selectClick(item) {
				let that = this
				let itemList = (item.entryStatus === '0') ? ['入库'] :
					(item.entryStatus === '1') ? ['入库明细'] : ['入库', '入库明细'];
				uni.showActionSheet({
					itemList: itemList,
					success: function(res) {
						console.log(res)
						console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
						let tapIndex = res.tapIndex
						if (itemList[tapIndex] === '入库') {
							uni.navigateTo({
								url: '/pages/procure/receipt/add?item=' + encodeURIComponent(JSON
									.stringify(item))
							});
						} else if (itemList[tapIndex] === '入库明细') {
							uni.navigateTo({
								url: '/pages/procure/receipt/detailed?procureOrderId=' + item
									.id
							});
						}
					},
					fail: function(res) {
						console.log(res.errMsg);
					}
				});
			},
			//查询
			queryClick() {
				this.updateOrderList()
				this.show = false

			},
			//重置
			resetClick() {
				this.search = {
					documentNumber: '',
					entryText: '',
					entryStatus: ''
				}
				this.updateOrderList()
			},
			updateOrderList() {
				this.pageNo = 1
				this.pageSize = 10
				this.result.orderList = [];
				this.procureOrderList();
			},
			lastClick() {
				if (this.result.current == 1) return
				this.pageNo--
				this.procureOrderList()
			},
			nextClick() {
				if (this.result.current == this.result.pages) return
				this.pageNo++
				this.procureOrderList()
			},
			select(e) {
				this.intindex = e
			},
			checkboxChange(n) {
				console.log('change', n);
				this.ids = n
			},
			open() {},
			close() {
				this.show = false;
				// console.log('close');
			},
			closes() {
				console.log('open');
				this.showSupplier = false

				// console.log('close');
			},
			confirmSupplier(e) {
				console.log(e)
				this.search.entryText = e.value
				this.search.entryStatus = e.indexs[0]
				this.showSupplier = false
			},
			goInfo(item) {
				if (!this.showCheckbox) {
					uni.navigateTo({
						url: '/pages/procure/receipt/add?item=' + encodeURIComponent(JSON.stringify(item))
					})
				}
			},
		},


	}
</script>
<style>
	page {
		background-color: #F5F5F5;
	}
</style>
<style lang="scss" scoped>
	.icon {
		border: 1px solid #E0E0E0;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
	}

	.add {
		background-color: #3247D3;
		padding: 8rpx 20rpx;
		border-radius: 10rpx;
		color: #fff;
	}

	.cl-status {
		color: #6A6A6A;
	}

	.pore {
		position: relative;
	}

	.popBox {
		width: 400rpx;
		height: 100%;
		position: relative;

		.btns {
			position: absolute;
			bottom: 30rpx;
			right: 30rpx;
			left: 30rpx;
			display: flex;
			justify-content: space-around;

			.chongzhi {
				border: 1px solid #E0E0E0;
				padding: 8rpx 30rpx;
				border-radius: 10rpx;
			}

			.confirm {
				padding: 8rpx 30rpx;
				border-radius: 10rpx;
				background-color: #3247D3;
				color: #fff;
			}
		}
	}

	.footer,
	.footer-btn {
		position: fixed;
		bottom: 0;
		background-color: #fff;
		width: 100%;
		padding: 30rpx;
		z-index: 999;
	}

	.w16 {
		width: 16.66%;
	}

	.border-right {
		border-right: 1px solid #C8C7CC;
	}

	.iconbg {
		background-color: #F0F0F0;
		width: 60rpx;
		height: 60rpx;
		border-radius: 20rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
</style>